.neo-table-header-button {
    align-items     : center;
    background-color: var(--table-header-button-background-color);
    background-image: var(--table-header-button-background-image);
    border-width    : 0;
    color           : var(--table-header-button-color);
    cursor          : pointer;
    display         : flex;
    flex-direction  : row;
    font-size       : 13px;
    font-weight     : 600;
    height          : 29px; // Webkit => Safari can not handle 100%
    justify-content : flex-end;
    margin          : 0;
    padding         : 7px 10px 6px;
    white-space     : nowrap;
    width           : 100% !important;

    &.neo-sort-asc, &.neo-sort-desc {
        .neo-button-glyph {
            opacity: 1;
        }
    }

    &.neo-sort-hidden {
        .neo-button-glyph {
            opacity: 0;
        }
    }

    &.neo-sort-desc {
        .neo-button-glyph {
            transform: rotate(180deg);
        }
    }

    &:focus {
        outline : 0;
    }

    &.icon-right {
        flex-direction: row-reverse;

        .neo-button-glyph {
            margin: 0 0 0 6px;
        }
    }

    .neo-button-glyph {
        color         : var(--table-header-button-glyph-color);
        font-size     : 12px;
        margin        : 0 6px 0 0;
        opacity       : 0;
        pointer-events: none;
        transition    : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change   : opacity, transform;
        z-index       : 2;
    }

    .neo-button-ripple {
        background-color: var(--table-header-button-ripple-background-color);
        border-radius   : 50%;
        opacity         : 0;
        position        : absolute;
        transform       : scale(4);
    }

    .neo-button-ripple-wrapper {
        height        : 100%;
        left          : 0;
        overflow      : hidden;
        pointer-events: none;
        position      : absolute;
        top           : 0;
        width         : 100%;
    }

    .neo-button-text {
        pointer-events: none;
        z-index       : 2;
    }
}
